<template>
    <div class="home">
        <Header></Header>
        <div class="home-container">
            <div class="blogArticle-list-container">
                <ArticleList></ArticleList>
            </div>
            <div class="home-container-right">
                <div>
                    <el-empty></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../components/header/index.vue';
import ArticleList from './article_list/index.vue';

export default {
    name: 'blog-home',
    components: {
        Header,
        ArticleList
    },
    data() {
        return {

        }
    }
}
</script>

<style scoped>
.home {
    background-color: rgb(241, 242, 245);
}


.pagination {
    margin: 20px 0;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    .home-container {
        padding: 10px;
        width: 100%;
    }

    .blogArticle-list-container {
        width: 100%;
    }

    .home-container-right {
        display: none;
    }
}

@media screen and (min-width: 1001px) {
    .home-container {
        min-height: 100vh;
        padding: 20px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .blogArticle-list-container {
        width: 66%;
        min-width: 600px;
    }

    .home-container-right {
        width: 32%;
    }


}
</style>
